<template>
  <div class="template-center-wrapper">
    <a-page-header title="模版中心" :show-back="false">
      <template #extra>
        <a-button type="primary" @click="add">新增</a-button>
      </template>
    </a-page-header>
    <div class="main">
      <div class="search">
        <a-form :model="searchForm" layout="inline">
          <a-form-item style="margin-left: -15px">
            <a-input v-model="searchForm.buyer" placeholder="请输入开票名称"></a-input>
          </a-form-item>
          <a-form-item>
            <a-select v-model="searchForm.seller" allow-clear placeholder="请选择卖方" :options="sellerOptions"></a-select>
          </a-form-item>
          <a-form-item>
            <a-input v-model="searchForm.taxNumber" placeholder="请输入税号"></a-input>
          </a-form-item>
          <a-form-item>
            <a-input v-model="searchForm.bank" placeholder="请输入开户银行"></a-input>
          </a-form-item>
          <a-form-item>
            <a-input v-model="searchForm.bankAccount" placeholder="请输入银行账号"></a-input>
          </a-form-item>
          <a-button type="primary" style="margin-left: 10px;" @click="getList">搜索</a-button>
        </a-form>
      </div>
      <div class="table" v-if="!isPhone">
        <a-table :columns="columns" :data="tableData.list" size="small">
          <template #action="{ record }">
            <a-button size="mini" @click="edit(record)">编辑</a-button>
            <a-button size="mini" status="danger" @click="remove(record)">删除</a-button>
          </template>
        </a-table>
      </div>
      <div class="phone-card" v-else>
        <div class="card-item" v-for="item in tableData.list">
          <div class="username">{{ item.buyer }}
          </div>
          <div class="handle-button">
            <a-button size="mini" @click="edit(item)">编辑</a-button>
            <a-button size="mini" status="danger" @click="remove(item)">删除</a-button>
          </div>
        </div>
      </div>
      <save-or-update ref="saveOrUpdateDialog" @finish="getList"></save-or-update>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, onMounted, reactive, ref} from "vue";
import {CommonTemplate, listAllTemplate, queryTemplate, removeTemplate} from "@/api/invoiceController";
import {Message, Modal, TableData} from "@arco-design/web-vue";
import SaveOrUpdate from "@/views/template/saveOrUpdate.vue";
import {useWindowSize} from "@vueuse/core/index";

const saveOrUpdateDialog = ref()
const searchForm = reactive({
  buyer: '',
  seller: '',
  taxNumber: '',
  bank: '',
  bankAccount: ''
})
const sellerOptions = ref([
  {
    label: '顺丰',
    value: '顺丰'
  },
  {
    label: '合丰',
    value: '合丰'
  }
])
const { width } = useWindowSize()
const isPhone = computed(() => {
  return width.value < 768
})

let tableData = reactive({
  list: []
})

const columns: TableData[] = [
  {
    title: '开票名称',
    dataIndex: 'buyer',
    key: 'buyer',
    width: 200
  },
  {
    title: '卖方',
    dataIndex: 'seller',
    width: 100
  },
  {
    title: '税号',
    dataIndex: 'taxNumber',
    key: 'taxNumber',
    width: 200
  },
  {
    title: '默认开票类型',
    dataIndex: 'defaultInvoiceType',
    width: 150
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
    width: 200
  },
  {
    title: '开户银行',
    dataIndex: 'bank',
    key: 'bank',
    width: 200
  },
  {
    title: '银行账号',
    dataIndex: 'bankAccount',
    key: 'bankAccount',
    width: 200
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
    key: 'phone',
    width: 200
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 150
  },
  {
    title: '操作',
    slotName: 'action',
    fixed: 'right',
    key: 'action',
    width: 150
  }
]

const getList = () => {
  queryTemplate(searchForm).then(res => {
    tableData.list = res as any[] || []
  })
}

const add = () => {
  saveOrUpdateDialog.value.open('add')
}

const edit = (record) => {
  saveOrUpdateDialog.value.open('edit', record)
}

const remove = (record: CommonTemplate) => {
  Modal.confirm({
    title: '提示',
    content: `确定删除「${record.buyer}」模版了吗？`,
    onOk: () => {
      removeTemplate(record.id || '').then(res => {
        if(res) {
          Message.success('删除成功')
          getList()
        }
      })
    }
  })
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.main {
  padding: 0 20px 50px;

  :deep(.arco-form-item-layout-inline) {
    margin-right: 0;
  }

  .phone-card {
    .card-item {
      display: flex;
      justify-content: space-between;
      width: 93%;
      border: 1px solid var(--color-border);
      padding: 10px;
      border-radius: 4px;
      margin-bottom: 10px;
      box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
    }
  }
}
</style>
